// pages/data/data.ts
const echarts = require("../../components/ec-canvas/echarts");
const api = require("../../api/move")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载,手动初始化图表
    },
    ecItem: {
      lazyLoad: true
    },
    exerciseArea:[
      {
        id:0,
        name:"全部"
      }

    ] as NavItem[],
    activeIndex:0 as number, //被选中的部位
    activeDate: 0 as number,//被选中的日期
    date:[
     "最近一周",
     "最近一月",
     "最近一年"
    ],
  },
  loadBar(data:PIEData, title:string,seriesName: string) {
    let pie = this.data.activeIndex === 0? this.selectComponent('#mychart-dom-bar'): this.selectComponent(`#pie${this.data.activeIndex}`)
    pie.init((canvas: any, width: number, height: number, dpr: number) => {    
      console.log(height);
        
      const pieChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      })
      var pieOperation = {
        title: {
          text: title,
          left: 'center'
        },
        animation: true,//提高页面加载速度，关闭echart的动画
        tooltip: {
          trigger: 'item',
          textStyle:{
            textShadowColor:'transparent',//文字块背景阴影颜色
            textShadowBlur:10,//文字块的背景阴影长度
          },
        },
        legend: {
          orient: 'horizontal',
          top:"10%"
        },
        series: [
          {
            name:seriesName,
            type:"pie",
            radius:"40%",
            data,
          }
        ],
      }
      pieChart.setOption(pieOperation)
      return pieChart
    })
  },
  onShow: function () {
    this.getTimesByDate();
  },
  onLoad: function() {
    // 获取部位项
    const app =getApp<IAppOption>();
    this.setData({
      exerciseArea:[...this.data.exerciseArea,...app.globalData.exerciseArea]
    })
  },
  changeItem(e:any): void {
    this.setData({
      activeIndex:e.currentTarget.dataset.index
    });
    this.commonFun();
  },
  slideOn(e:any):void {
    this.setData({
      activeIndex: e.detail.current
    })
    this.commonFun();
  },
  changeDate(e:any):void {
    this.setData({
      activeDate:e.currentTarget.dataset.index
    })
    this.commonFun();
  },
  // 获取每个部位在选择时间内的训练次数
  async getTimesByDate():Promise<void> {
    const time:DateCharts = this.data.activeDate === 0?this.getLastWeek() : this.data.activeDate === 1?this.getLastMonth():this.getLastYear();    
    const result:Response = await api.getTimesByDate(time.beginDate,time.endDate);
    if(!result.code) {
      const data = result.data.map((item:DataCharts) => ({
        name: item.name,
        value: item.times
      }))
      this.loadBar(data,"锻炼次数分布","次数");
    }
  },
  // 获取最近一周的时间
  getLastWeek():DateCharts {
    // 获取当前日期
    let currentDate = new Date();

    // 获取一周前的日期
    let startDate = new Date();
    startDate.setDate(currentDate.getDate() - 7);

    // 格式化日期
    let beginDate = startDate.getFullYear() + '-' + (startDate.getMonth() + 1).toString().padStart(2, '0') + '-' + startDate.getDate().toString().padStart(2, '0');
    let endDate = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1).toString().padStart(2, '0') + '-' + currentDate.getDate().toString().padStart(2, '0');
    const time = {
      beginDate,
      endDate
    }
    return time
  },
  // 获取最近一个月的时间
  getLastMonth():DateCharts {
    // 获取当前日期
    let currentDate = new Date();

    // 获取一月前的日期
    let startDate = new Date();
    startDate.setMonth(currentDate.getMonth() - 1);

    // 格式化日期，padStart第一个参数指定长度，第二个参数指定填充的字符,start代表填充在头部
    let beginDate = startDate.getFullYear() + '-' + (startDate.getMonth() + 1).toString().padStart(2, '0') + '-' + startDate.getDate().toString().padStart(2, '0');
    let endDate = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1).toString().padStart(2, '0') + '-' + currentDate.getDate().toString().padStart(2, '0');

    const time = {
      beginDate,
      endDate
    }
    return time;
  },
  // 获取最近一年时间内的动作
  getLastYear(): DateCharts {
    // 获取当前日期
    let currentDate = new Date();

    // 获取一年前的日期
    let startDate = new Date();
    startDate.setFullYear(currentDate.getFullYear() - 1);

    // 格式化日期
    let beginDate = startDate.getFullYear() + '-' + (startDate.getMonth() + 1).toString().padStart(2,"0") + '-' + startDate.getDate().toString().padStart(2, '0');
    let endDate = currentDate.getFullYear() + '-' + (startDate.getMonth() + 1).toString().padStart(2,"0") + '-' + startDate.getDate().toString().padStart(2, '0');
    const times = {
      beginDate,
      endDate
    }
    return times;
  },
  // 获取选定时间内，该部位中每个动作的次数
  async getMoveTimesByDate():Promise<void> {
    const time:DateCharts = this.data.activeDate === 0?this.getLastWeek() : this.data.activeDate === 1?this.getLastMonth():this.getLastYear();  
    const result = await api.getMoveTimesByDate(this.data.activeIndex, time.beginDate, time.endDate);
    if(!result.code) {
      const data = result.data.map((item:DataCharts) => ({
        name: item.name,
        value: item.times
      }))
      this.loadBar(data,"锻炼部位分布","次数");
    }    
  },
  commonFun(): void {
    if(this.data.activeIndex === 0) {
      this.getTimesByDate();
    }else {
      this.getMoveTimesByDate();
    }
  }
})